<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Big Screen Design</title>
  <style>
    html {
      font-size: 80px;
      /* 基准大小 */
    }

    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      width: 24rem;
      height: 13.5rem;
    }

    .container {
      max-width: 1920px;
      margin: 0 auto;
      padding: 1rem;
    }

    h1 {
      font-size: 2rem;
      /* 相对于html的font-size */
      color: #333;
    }

    p {
      font-size: 1rem;
      color: #666;
    }

    @media screen and (max-width: 1920px) {
      html {
        font-size: calc(80px / (1920 / 100%));
        /* 动态调整font-size */
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>Welcome to the Big Screen</h1>
    <p>This is a responsive design example using rem units.</p>
  </div>
  <script>
    // 动态调整html的font-size
    function adjustRem() {
      var width = window.innerWidth;
      var baseWidth = 1920; // 基准宽度
      var baseFontSize = 100; // 基准font-size
      var fontSize = (width / baseWidth) * baseFontSize;
      document.documentElement.style.fontSize = fontSize + 'px';
    }
    // 监听窗口大小变化
    window.addEventListener('resize', adjustRem);
    // 初始化
    adjustRem();
  </script>
</body>

</html>